<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div class="box"></div>
		<div id="box"></div>
		<div class="box"></div>
		<div></div>
		<script type="text/javascript">
			
			$("#box").style.backgroundColor = "red";
			
			var claArr = $(".box");
			for(var i=0;i<claArr.length;i++){
				claArr[i].style.backgroundColor = "yellow";
			}
			var divArr = $("div");
			for(var i=0;i<divArr.length;i++){
				divArr[i].style.border = "2px solid #000";
			}
			
			
			function $(str) {
				//判断第一个字符是#走第一个逻辑,是.走第二个逻辑,如果都不是,走最后一个逻辑
				var str1 = str.charAt(0);
				if(str1 === "#"){
					//3.隐藏：
					//返回获取的元素。（因为传递过来的值带有#，所以我们要从第二项开始截取并搜索）
					return document.getElementById(str.slice(1));
				}else if(str1 === "."){
					return document.getElementsByClassName(str.slice(1));
				}else{
					return document.getElementsByTagName(str);
				}
				
			}
		</script>
	</body>
</html>
